<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AjaxTest</title>

    <script src="/html/axios.min.js"></script>

    <script>

        function $(id) {
          return document.getElementById(id);
        }

        function checkName() {
            //向服务器发送一个AJAX的get请求。第一个参数是controller中指定方法的url路径
            // 第二个参数为方法的形参列表（请求参数）
            axios.get("/user/checkName",{
                params:{
                    //键：值。（键必须和方法的形参名字一致）
                    //请求的表单数据
                    name: $("userName").value
                }
            }).then(resp => { //箭头函数
                // alert(resp.data) //取出响应数据打印

                let info = resp.data;//得到响应信息的消息体

                if (info == "yes"){
                    $("infoSpan").innerHTML = "该用户名已经存在";
                    $("infoSpan").style.color = "red";
                }
                else {
                    $("infoSpan").innerHTML = "验证通过";
                    $("infoSpan").style.color = "green";
                }
            })
        }
        async function send() {
            var info = "123";
            await axios.get("/user/speak",null).then(resp =>{

                info = resp.data;

                alert(resp.data);
                alert(info);
            });

            alert(info);
        }
    </script>
</head>
<body>

    用户名：<input type="text" id="userName" onblur="checkName()">
            <span id="infoSpan"></span>
            <input type="button" value="点击" onclick="send()">

    <form action="/user/checkName">
        用户名：<input type="text" name="name"><br>
            <input type="submit" value="提交">
    </form>
</body>
</html>